<template>
  <div class="form-modal">
    <a-modal
      title="订单详情"
      :width="600"
      style="top: 50px;"
      :visible="visible"
      @cancel="handleCancel"
    >
      <div class="table-page-search-wrapper" >
        <a-form :form="form" layout="inline">
          <div class="row-wrapper">
            <div class="title">客户信息</div>
            <a-row :gutter="12" style="margin-bottom: 45px;color: #000000;">
              <a-col :md="12" :sm="24" >姓名：{{billDetails.name}}</a-col>
              <a-col :md="12" :sm="24" >客户卡号：{{billDetails.cardNo}}</a-col>
            </a-row>
          </div>
          <div class="row-wrapper">
            <div class="title">支付信息</div>
            <a-row :gutter="12" style="margin-bottom: 25px;color: #000000;">
              <a-col :span="8">增值金信息：<span v-if="billDetails.totalItemGold"></span> {{ billDetails.totalItemGold }}</a-col>
              <a-col :span="8">优惠券信息：<span v-if="billDetails.totalItemGold">{{ billDetails.totalItemTicket }}</span> </a-col>
              <a-col :span="8">积分抵扣： <span v-if="billDetails.totalItemJf">{{ billDetails.totalItemJf }}</span>  </a-col>
            </a-row>
            <a-row :gutter="12" style="margin-bottom: 25px;color: #000000;">
              <a-col :span="12" style="font-size: 18px;">应付金额：<span class="g-color" style="font-size: 24px;" >{{ billDetails.totalPayableAmt}}</span> </a-col>
              <a-col :span="12" style="font-size: 18px;">
                抵扣总计：{{ parseFloat(billDetails.totalItemGold)+parseFloat(billDetails.totalItemTicket)+parseFloat(billDetails.totalItemJf) }}
              </a-col>
            </a-row>
<!--            <a-row :gutter="12" style="margin-bottom: 0px;" >-->
<!--              <a-form-item label="预存款抵扣">-->
<!--                <a-col :span="24" >-->
<!--                  <a-input-->
<!--                    type="number"-->
<!--                    v-decorator="['ycAmt', {rules: [{ required: false, message: '请选择联系方式！' },{validator: validatorYcAmt}]}]"-->
<!--                    placeholder="请输入金额"-->
<!--                    style="width: 200px;" />-->
<!--                  <span style="margin-left:15px;">(可用预存款：{{ billDetails.ycAmt }})</span>-->
<!--                </a-col>-->
<!--              </a-form-item>-->
<!--            </a-row>-->

          </div>
        </a-form>
      </div>
      <div slot="footer" class="g-flex g-x-between g-y-center">
        <div ><span style="font-size: 18px;">成交金额：</span><span class="g-color" style="font-size: 24px;">{{ billDetails.totalChargeAmt}}</span></div>
        <div>
          <a-button  @click="visible=false">取消</a-button>
          <a-button type="primary" @click="submit" :loading="confirmLoading">确定</a-button>
        </div>
      </div>
    </a-modal>
  </div>

</template>

<script>
import {sceneUpdate,getBill,submitBill} from '@/api/modular/main/customer/customerScene'

export default {
  props:{
    row_record:{
      type:Object,
      default:()=>{{}}
    }
  },
  data () {
    return {
      visible:false,
      confirmLoading:false,
      form: this.$form.createForm(this),
      billDetails:{},
    }
  },
  methods: {
    add () {
      this.visible = true
      this.form.resetFields()
      this.$nextTick(()=>{
        console.log('开单行数据：',this.row_record)
        const schemeId = this.row_record.tbConsultSchemeId
        console.log('方案id',schemeId)
        getBill({schemeId}).then(res=>{
          if(res.data){
            console.log('请求的账单详情：',res)
            this.billDetails=res.data
          }
        })
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
    },
    /**
     表单校验年龄
     * */
    validatorYcAmt (rule, value, callback) {
      if(!value){
        callback()
      }
      if(value<0){
        callback('不能输入负数！')
      }
      if(parseFloat(value)>parseFloat(this.billDetails.ycAmt) ){
        callback('不能大于可用预存款！')
      }
      if(value.trim()==''){
        callback('不能输入空格！')
      }
      callback()
    },
    /**
     提交表单
     * */
    submit(){
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (errors) {
          console.log('表单检验未通过111')
          this.confirmLoading = false
          return
        }
        console.log('表单检验通过222',values)
        console.log(this.row_record)
        const deposit =values.ycAmt?values.ycAmt:0
        console.log('11111',deposit)
        const params = {
          schemeId:this.row_record.tbConsultSchemeId,
          deposit:deposit
        }
        submitBill(params).then(res=>{
          console.log('提交开单结果为：',res)
          if(res.code==200){
            this.$message.success({
              content:res.data,
              duration:1,
              onClose:()=>{
                this.visible=false
                this.$parent.$refs.table.loadData()
              }
            })
          }
        })
        this.confirmLoading = false
      })
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-modal-body{
  padding-bottom: 0px;
}
.col-form-item{
  padding: 0 4px  20px;
}
/deep/ .ant-modal-footer{
  border-top: none !important;
}
</style>

